<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="a.js"></script>
    <link rel="stylesheet" href="a.css" />-->
  </head>
  <body>
    <div class="a" onclick="prt()"></div>
    <!--设置第一个a有点击事件-->
    <div class="a"></div>
    <div id="b">
      <img src="222.jpg" />
    </div>

    <div class="info">
      <p>x坐标<span id="xpos">0</span>px</p>
      <p>y坐标<span id="ypos">0</span>px</p>
    </div>
  </body>
  <style>
    .a {
      width: 0px;
      height: 0px;
    }
    #b {
      width: 100px;
      height: 100px;
      background-size: cover;
      background-color: rgb(185, 235, 235);
      background-position: center;
      position: absolute;
    }
  </style>
  <script>
    function prt() {
      console.log(11111111);
    }

    //const el1 = document.getElementById("b");
    //const el2 = document.getElementsByClassName("a");
    //console.log(el1);
    //console.log(el2);
    //console.log(el2[1]);

    //console.log(el1.innerText);
    //el1.innerText = "运动B";
    //console.log(el1.innerText);
    const timeB = document.getElementById("b");
    const xpos = document.getElementById("xpos");
    const ypos = document.getElementById("ypos");

    let startTime = Date.now();

    function tbc() {
      const now = new Date();
      const elapsedseconds = (Date.now() - startTime) / 10000;
      //const seconds = now.getSeconds();
      //const size = 100 + (seconds / 60) * 200;
      //timeB.style.width = size + "px";
      //timeB.style.height = size + "px";
      let x, y;
      const containerWidth = window.innerWidth - 100;
      const containerHeight = window.innerHeight - 100;
      x = (containerWidth / 2) * (1 + Math.sin(elapsedseconds));
      y = (containerHeight / 2) * (1 + Math.sin(elapsedseconds));

      timeB.style.left = x + "px";
      timeB.style.top = y + "px";
      xpos.textContent = Math.round(x);
      ypos.textContent = Math.round(y);
    }
    setInterval(tbc, 16);
    tbc();
  </script>
</html>
